import styles from './index.module.scss'
import Channels from './components/Channels'
import { Tabs, Popup } from 'antd-mobile'
import Icon from '@/components/Icon'
import {
  changeActive,
  getAllChannel,
  getUserChannel,
} from '@/store/acitons/home'
import { useInitValue } from '@/utils/hooks'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import ArticleList from './components/ArticleList'
import { useHistory } from 'react-router'
const Home = () => {
  const history = useHistory()
  // 1.获取用户频道数据
  const { channels, active } = useInitValue(getUserChannel, 'home')
  // console.log(channels)
  const dispatch = useDispatch()
  // 2.点击 右上角按钮控制弹出层
  const [visible, setVisible] = useState(false)
  // 3. 获取所有频道列表
  useInitValue(getAllChannel, 'home')
  const show = () => {
    setVisible(true)
  }
  const hide = () => {
    setVisible(false)
  }
  // 切换高亮

  const changeHighShow = (e: string) => {
    dispatch(changeActive(+e))
  }
  return (
    <div className={styles.root}>
      {channels.length > 0 && (
        <Tabs
          className="tabs"
          activeKey={active + ''}
          onChange={changeHighShow}
        >
          {channels.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}>
              <ArticleList channelId={item.id}></ArticleList>
            </Tabs.Tab>
          ))}
        </Tabs>
      )}

      <div className="tabs-opration">
        <Icon type="iconbtn_search" onclick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onclick={show} />
      </div>

      <Popup visible={visible} position="left">
        <Channels hide={hide}></Channels>
      </Popup>
    </div>
  )
}

export default Home
